import React from 'react';
import { Card, Descriptions, Tag, Divider, Button } from 'antd';
import { useParams, useNavigate } from 'react-router-dom';
import { ArrowLeftOutlined } from '@ant-design/icons';
import './styles.css';

interface ContractDetail {
  id: string;
  contractId: string;
  orderId: string;
  productId: string;
  buyerId: string;
  sellerId: string;
  contactPeople: string;
  contactNumber: string;
  usageDescription: string;
  quantity: number;
  orderAmount: number;
  contractDomains: string;
  transactionAmount: number;
  settlementMethod: string;
  deductServiceFee: boolean;
  productPrice: number;
  billingSpecification: string;
  contractSignDate: string;
  settleLists: string;
  deliveryChannel: string;
  deliveryMethod: string;
  settlementCycle: number;
  settlementCycleUnit: string;
  paymentDueDate: string;
  deliveryConfirmationDate: string;
  status: string;
}

// 模拟数据
const mockDetail: ContractDetail = {
  id: 'CT001',
  contractId: 'CTR20231215001',
  orderId: 'ORD20231215001',
  productId: 'PRD001',
  buyerId: 'BUY001',
  sellerId: 'SEL001',
  contactPeople: '张三',
  contactNumber: '13800138000',
  usageDescription: '用于交通数据分析和规划',
  quantity: 1,
  orderAmount: 9999.99,
  contractDomains: '交通管理部门',
  transactionAmount: 9999.99,
  settlementMethod: 'SETTLE_IN_PLATFORM',
  deductServiceFee: true,
  productPrice: 9999.99,
  billingSpecification: '按次计费',
  contractSignDate: '2023-12-15',
  settleLists: '每月结算一次',
  deliveryChannel: '平台在线交付',
  deliveryMethod: '在线交付',
  settlementCycle: 30,
  settlementCycleUnit: 'DAY',
  paymentDueDate: '2024-01-15',
  deliveryConfirmationDate: '2023-12-16',
  status: 'active'
};

const ContractDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  // 实际项目中这里应该调用API获取数据
  const detail = mockDetail;

  const getStatusTag = (status: string) => {
    const colors: Record<string, string> = {
      active: 'success',
      pending: 'processing',
      expired: 'default',
      terminated: 'error'
    };
    const labels: Record<string, string> = {
      active: '生效中',
      pending: '待生效',
      expired: '已过期',
      terminated: '已终止'
    };
    return <Tag color={colors[status]}>{labels[status]}</Tag>;
  };

  return (
    <div className="contract-detail-container">
      <Card 
        title={
          <div className="detail-header">
            <Button 
              type="link" 
              icon={<ArrowLeftOutlined />} 
              onClick={() => navigate(-1)}
            >
              返回
            </Button>
            <span>合同详情</span>
          </div>
        }
        className="detail-card"
      >
        <div className="contract-header">
          <div className="contract-title">
            <h2>合同编号：{detail.contractId}</h2>
            {getStatusTag(detail.status)}
          </div>
        </div>

        <Divider />

        <Descriptions title="基本信息" bordered>
          <Descriptions.Item label="订单编号">{detail.orderId}</Descriptions.Item>
          <Descriptions.Item label="产品ID">{detail.productId}</Descriptions.Item>
          <Descriptions.Item label="买方ID">{detail.buyerId}</Descriptions.Item>
          <Descriptions.Item label="卖方ID">{detail.sellerId}</Descriptions.Item>
          <Descriptions.Item label="联系人">{detail.contactPeople}</Descriptions.Item>
          <Descriptions.Item label="联系电话">{detail.contactNumber}</Descriptions.Item>
        </Descriptions>

        <Divider />

        <Descriptions title="交易信息" bordered>
          <Descriptions.Item label="交��金额">￥{detail.transactionAmount}</Descriptions.Item>
          <Descriptions.Item label="产品单价">￥{detail.productPrice}</Descriptions.Item>
          <Descriptions.Item label="数量">{detail.quantity}</Descriptions.Item>
          <Descriptions.Item label="计费规格">{detail.billingSpecification}</Descriptions.Item>
          <Descriptions.Item label="结算方式">{detail.settlementMethod}</Descriptions.Item>
          <Descriptions.Item label="是否扣除服务费">
            {detail.deductServiceFee ? '是' : '否'}
          </Descriptions.Item>
        </Descriptions>

        <Divider />

        <Descriptions title="交付信息" bordered>
          <Descriptions.Item label="交付渠道">{detail.deliveryChannel}</Descriptions.Item>
          <Descriptions.Item label="交付方式">{detail.deliveryMethod}</Descriptions.Item>
          <Descriptions.Item label="确认交付日期">{detail.deliveryConfirmationDate}</Descriptions.Item>
          <Descriptions.Item label="合同签订日期">{detail.contractSignDate}</Descriptions.Item>
          <Descriptions.Item label="应付款日期">{detail.paymentDueDate}</Descriptions.Item>
        </Descriptions>

        <Divider />

        <Descriptions title="结算信息" bordered>
          <Descriptions.Item label="结算周期">{detail.settlementCycle} {detail.settlementCycleUnit}</Descriptions.Item>
          <Descriptions.Item label="结算支付周期">{detail.settleLists}</Descriptions.Item>
          <Descriptions.Item label="合同相关方">{detail.contractDomains}</Descriptions.Item>
        </Descriptions>

        <Divider />

        <Card title="数据使用描述" className="sub-card">
          <p>{detail.usageDescription}</p>
        </Card>
      </Card>
    </div>
  );
};

export default ContractDetail; 